<template>
  <div class="dashboard-container">
    <el-card>
      <el-row type="flex">
        <el-col>
          <!-- 左边内容 -->
          <el-button type="primary" @click="isShowDialog = true">添加页面</el-button>
        </el-col>

        <el-input v-model="data" placeholder="请输入内容" @input="inputFN" />
        <el-button @click="SearchBtn">
          <i class="el-icon-search" />
        </el-button>
      </el-row>
      <el-divider />
      <!--表格 -->
      <el-table :data="PagesList" border="">
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="content" label="内容" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" @click="EditBtn(row.id)">编辑</el-button>
            <el-button type="danger" @click="DelBtn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout=" prev, pager, next"
          :total="total"
          :page-size="+parameter._limit"
          @size-change="handleSizeChange"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <el-dialog
      :title="`${formData.id ? '编辑页面' : '新增页面'}`"
      :visible="isShowDialog"
      @close="btnCancel"
    >
      <el-form ref="AddPages" :model="formData" :rules="rules">
        标题
        <el-form-item prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>

        <el-form-item>
          内容 <VueEditor ref="vueEditor" :config="config" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { GetPages, DelPages, AddPages, EditPages, updatePages, UpPagesEdit } from '@/api/page-mana'
import VueEditor from 'vue-word-editor'
import 'quill/dist/quill.snow.css'
export default {
  components: { VueEditor },
  data() {
    return {
      config: {},
      PagesList: [],
      data: '',
      parameter: {
        _limit: '5',
        _start: '0',
        title_contains: ''
      },
      total: 0,
      pageSetting: {
        page: 1,
        pagesize: 5
      },
      formData: {
        title: '',
        content: ''
      },
      rules: {
        title: [
          {
            required: true, message: '该项不能为空', trigger: 'blur'
          }
        ],
        content: [
          {
            required: true, message: '该项不能为空', trigger: 'blur'
          }
        ]
      },
      isShowDialog: false
    }
  },
  created() {
    this.GetPages()
  },
  methods: {
    // 筛选
    async SearchBtn() {
      this.parameter.title_contains = this.data
      this.parameter._start = 0
      this.PagesList = await GetPages(this.parameter)
      this.total = this.PagesList.length
      if (this.parameter.title_contains === '') {
        this.GetPages()
      }
    },
    async inputFN(value) {
      // console.log(value)
      this.parameter.title_contains = value
      this.parameter._start = 0
      this.PagesList = await GetPages(this.parameter)
      this.total = this.PagesList.length

      this.GetPages()
    },
    // pageSize 改变时会触发	每页条数
    handleSizeChange(page) {
      // console.log(page)
      this.pageSetting.pagesize = page
      this.parameter._limit = page
      this.GetPages()
    },
    //  分页
    async currentChange(newPage) {
      // console.log(newPage)
      // this.pageSetting.page = newPage
      this.parameter._start = (newPage - 1) * this.pageSetting.pagesize
      this.GetPages()
    },
    // 获取数据列表
    async GetPages() {
      this.total = await UpPagesEdit()
      this.PagesList = await GetPages(this.parameter)
      // console.log(this.PagesList.length)
      // console.log(this.PagesList)
    },

    // 编辑
    async EditBtn(id) {
      this.isShowDialog = true

      this.formData = await EditPages(id)
      this.$refs.vueEditor.editor.root.innerHTML = this.formData.content
      // console.log(this.formData)
    },
    // 删除
    async DelBtn(id) {
      try {
        await this.$confirm('确定删除吗？')
        await DelPages(id)
        this.$message.success('删除成功')
        await this.GetPages()
        if (this.PagesList.length === 0) {
          this.parameter._start = this.parameter._start - this.parameter._limit
          this.GetPages()
        } if (this.parameter._start < 0) {
          this.parameter._start = 0
          this.data = ''
          this.GetPages()
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 弹窗确认按钮
    async btnOK() {
      var content = this.$refs.vueEditor.editor.root.innerHTML
      // console.log(content)
      this.formData.content = content

      if (this.$refs.vueEditor.editor.getLength() > 1) {
        // 将用户输入的值赋为content
        this.content = this.$refs.vueEditor.editor.root.innerHTML
      } else {
        this.$message.warning('富文本内容不能为空')
        return
      }

      if (this.formData.id) {
        // 编辑
        await updatePages(this.formData)
      } else {
        // 新增
        await AddPages(this.formData)
      }

      this.$message.success('操作成功')

      this.isShowDialog = false
      this.formData = {}
      this.$refs.vueEditor.editor.root.innerHTML = ''
      this.GetPages()
    },
    // 弹窗页面取消
    btnCancel() {
      this.formData = {}
      this.$refs.vueEditor.editor.root.innerHTML = ''
      this.$refs.AddPages.resetFields()
      this.isShowDialog = false
      this.GetPages()
    }

  }
}
</script>

<style  scoped>
.el-pagination {
  margin-top: 10px;
}
.dashboard-container {
  margin: 15px;
}

.el-col {
  display: flex;
}
.el-divider {
  margin-top: 10px;
  /* padding: 0 100px; */
  background: #000;
}
</style>
